import React from "react";
import { BrowserRouter, Routes, Route, Outlet, RouterProvider, createBrowserRouter, useRoutes } from "react-router-dom";
const routes = [
  {
    path: "/",
    element: <div>首页</div>,
  },
  {
    path: "/list",
    element: <div>list</div>,
  },
  {
    path: "/login",
    element: <div>login</div>,
  },
  {
    path: "/one",
    element: (
      <div>
        <h1>one</h1>
        <Outlet></Outlet>
      </div>
    ),
    children: [
      {
        path: "/one/two1",
        element: <div>two1</div>,
      },
      {
        path: "/one/two2",
        element: <div>two2</div>,
      },
    ],
  },
];
const App = () => {
  const RouterView = () => useRoutes(routes)
  return (
    <div>
      {/* 方案一：  */}
      {/* <BrowserRouter>
        <Routes>
          <Route path="/" element={<div>首页</div>}></Route>
          <Route path="/list" element={<div>list</div>}></Route>
          <Route path="/login" element={<div>login</div>}></Route>
          <Route
            path="/one"
            element={
              <div>
                <h1>one</h1>
                <Outlet></Outlet>
              </div>
            }
          >
            <Route path="/one/two1" element={<div>two1</div>}></Route>
            <Route path="/one/two2" element={<div>two2</div>}></Route>
          </Route>
        </Routes>
      </BrowserRouter> */}
      {/* 方案二 */}
      {/* <RouterProvider router={createBrowserRouter(routes)}></RouterProvider> */}

      {/* 方案三： */}
      <BrowserRouter>
        <RouterView></RouterView>
      </BrowserRouter>
    </div>
  );
};

export default App;
